<template>
  <div id="tags-view-container" class="tags-view-container tabs-nav el-tabs--card">
    <div class="el-tabs__header">
      <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
        <router-link
          v-for="tag in visitedViews"
          ref="tag"
          :key="tag.name"
          :class="isActive(tag)?'is-active':''"
          :to="{ name: tag.name }"
          tag="span"
          class="el-tabs__item"
          @contextmenu.prevent.native="openMenu(tag,$event)"
        >
          {{ $t(tag.name) }}
          <span v-if="isAffix(tag)" class="el-icon-close" @click.prevent.stop="removeTab(tag)" />
        </router-link>
      </scroll-pane>
    </div>
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li v-if="isAffix(selectedTag)" @click="removeTab(selectedTag)">{{ $t('CLOSE') }}</li>
      <li @click="closeOthersTags">{{ $t('CLOSE_OTHERS') }}</li>
      <li @click="closeRightTags">{{ $t('CLOSE_RIGHT_TABS') }}</li>
    </ul>
  </div>
</template>

<script>
  import ScrollPane from './ScrollPane'
  export default {
    components: { ScrollPane },
    props: {
      visitedViews: {
        type: Array,
        default: () => []
      },
      getCurrentTab: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        visible: false,
        top: 0,
        left: 0,
        selectedTag: {}
      }
    },
    watch: {
      $route(val) {
        this.moveToCurrentTag()
      },
      visible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      }
    },
    created() {
      console.log(this.visitedViews)
    },
    mounted() {
      this.$nextTick(() => {
        this.moveToCurrentTag()
      })
    },
    methods: {
      removeTab(tag) {
        if (tag.name === this.$route.name) {
          const itemIndex = this.visitedViews.findIndex((tab) => tab.name === this.$route.name)
          this.removeItem(itemIndex)
          this.toLastView()
        } else {
          for (const [i, v] of this.visitedViews.entries()) {
            if (v.name === tag.name) {
              this.removeItem(i)
              break
            }
          }
        }
      },
      toLastView() {
        this.closeMenu()
        const latestView = this.visitedViews.slice(-1)[0]
        if (latestView) {
          this.$router.push({ name: latestView.name })
        } else {
          this.$router.push('/')
        }
      },
      closeOthersTags() {
        this.$store.commit('del_others_visited_views', this.selectedTag)
        this.closeMenu()
        this.$nextTick(() => {
          if (!this.isActive(this.selectedTag)) {
            this.$router.push({ name: this.selectedTag.name })
          }
          this.moveToCurrentTag()
        })
      },
      closeRightTags() {
        const index = this.visitedViews.findIndex(item => item.name === this.selectedTag.name)
        this.$store.commit('del_right_visited_views', index)
        this.closeMenu()
        this.$nextTick(() => {
          if (!this.isActive(this.selectedTag)) {
            this.$router.push({ name: this.selectedTag.name })
          }
          this.moveToCurrentTag()
        })
      },
      moveToCurrentTag() {
        const tags = this.$refs.tag
        this.$nextTick(() => {
          for (const tag of tags) {
            if (tag.to.name === this.$route.name) {
              this.$refs.scrollPane.moveToTarget(tag)
              break
            }
          }
        })
      },
      isAffix(tag) {
        return tag.name !== 'HOME'
      },
      isActive(route) {
        return route.name === this.$route.name
      },
      removeItem(index) {
        this.$store.commit('deleteTabs', index)
      },
      openMenu(tag, e) {
        const menuMinWidth = 105
        const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
        const offsetWidth = this.$el.offsetWidth // container width
        const maxLeft = offsetWidth - menuMinWidth // left boundary
        const left = e.clientX - offsetLeft + 15 // 15: margin right
        if (left > maxLeft) {
          this.left = maxLeft
        } else {
          this.left = left
        }
        this.top = e.clientY
        this.visible = true
        this.selectedTag = tag
      },
      closeMenu() {
        this.visible = false
      },
      handleScroll() {
        this.closeMenu()
      }
    }
  }

</script>

<style lang="scss">
  .tags-view-container{
    height:40px;
    .tags-view-wrapper,
    .el-scrollbar__view{
      height: 100%;
      white-space: nowrap;
    }
    .scroll-container .el-scrollbar__wrap{
      height: 100%;
      line-height: 40px;
      overflow: hidden;
    }
    .el-scrollbar__bar.is-horizontal{
      height: 0;
    }
    .el-scrollbar__bar.is-vertical{
      width:0;
    }
    .el-tabs__item{
      position: relative;
      z-index: 2;
    }
    .contextmenu {
      margin: 0;
      background: #fff;
      z-index: 3000;
      position: absolute;
      list-style-type: none;
      padding: 5px 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #333;
      box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
      li {
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;
        &:hover {
          background: #eee;
        }
      }
    }
  }
</style>
